<template>
    <NewPage v-show="Goods[15].length != 0"></NewPage>
    <div v-show="Goods[15].length == 0">
    <InLogin 
    v-show="showFlog" 
    :log="log"
    :eye="eye"
    :eyeImg="eyeImg"
    :SeePassword="SeePassword"
    :ChangeShow="ChangeShow"
    ></InLogin>
    <RegistePage 
    v-show="!showFlog" 
    :log="log"
    :eye="eye"
    :eyeImg="eyeImg"
    :SeePassword="SeePassword"
    :ChangeShow="ChangeShow"></RegistePage>
    </div>
</template>

<script>
import { inject,  reactive,ref } from 'vue';
import { h } from 'vue'
import { ElMessage } from 'element-plus'
import RegistePage from './RegistePage.vue';
import InLogin from './InLogin.vue';
import NewPage from './NewPage.vue';

export default {
    components:{
        RegistePage,
        InLogin,
        NewPage
    },
    setup(){
        //封装播报函数
        function log(string,color){
            ElMessage({
                message: h('p', { style: `line-height: 1; font-size: 14px; color:${color}` }, [
                h('i', null, string),
                ]),
                })
        }
        //密码的可见
        let eye = reactive(['password','password','password'])
        const eyesHideImg = require('../assets/icons/logo/eyesHide.png')
        const eyesShowImg = require('../assets/icons/logo/eyesShow.png')
        let eyeImg = reactive([
            eyesHideImg,
            eyesHideImg,
            eyesHideImg])
        function SeePassword(index){
            if(eyeImg[index] == eyesHideImg){
                eyeImg[index] = eyesShowImg
                eye[index] = 'text'
            }else{
                eyeImg[index] = eyesHideImg
                eye[index] = 'password'
            }
        }
        //登录与注册
        const showFlog = ref(true)
        function ChangeShow(){
            showFlog.value = !showFlog.value
        }
        //确定当前状态
        const Goods = inject('Goods')
        return {showFlog,ChangeShow,eye,SeePassword,eyeImg,log,Goods}
        }
    }

</script>

<style>
</style>